<template>
	<view>
		<view class="codeBg" @click="sharePosterToWx">
			<image class="picidngwei" src="http://xjk.minshangkeji.com/index.php/api/member/myqrcode?inviter_num=inviter_num" mode="aspectFill"></image>
			<!-- <view class="butsc">
				一键生成
			</view> -->
		</view>
		<canvas id="canvas"  canvas-id="canvas" style="visibility: hidden;"></canvas>
	</view> 
</template>

<script>
	import Require from '@/common/require.js';
	export default {
		data() {
			return {
				inviter_num:'',
				//海报背景地址
				postCover:'http://xjk.minshangkeji.com/static/frontend/paper.png',
				
				//二维码地址
				qrImagePath:'http://xjk.minshangkeji.com/index.php/api/member/myqrcode?inviter_num=inviter_num',
			};
		},
		onLoad(option) {
			var self=this
			self.inviter_num=option.id
		},
		methods:{
			
			createPost: function(cb) {
				var self = this;
				var ctx = uni.createCanvasContext('canvas');
				var coverImg = self.postCover;
				// 绘制背景海报
				ctx.drawImage(coverImg, 0, 0, uni.upx2px(750), uni.upx2px(1170));
				// 绘制二维码
				ctx.drawImage(self.qrImagePath, uni.upx2px(180), uni.upx2px(650), uni.upx2px(400), uni.upx2px(400));
			
				ctx.draw(false, () => {
					self.saveTempPoster(cb);
				})
			},
			saveTempPoster: function(cb) {
				var self = this;
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					canvasId: 'canvas',
					success: function(res) {
						// 成功后图片赋值
						self.postPath = res.tempFilePath;
						if(cb && typeof(cb)== 'function') {
							cb();
						}
					}
				})
			},
			sharePosterToWx: function() {
				var self = this;
				if(!self.qrImagePath) {
					return;
				}
				uni.showLoading({
					title: '生成海报中...'
				})
				self.createPost(function() {
					uni.hideLoading();
					// 调起微信分享
					uni.share({
						provider: 'weixin',
						type: 2,
						scene: 'WXSceneSession',
						imageUrl: self.postPath,
						success: function() {
							uni.hideLoading();
						}
					})
				});
			}
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color: #442CC4;
	}
	.picidngwei{
		width: 400rpx;
		height: 400rpx;
		margin-top: 280rpx;
	}
	.codeBg{
		position: relative;
		display: flex;
		background: url(/static/user2/codeBgg.png) no-repeat;
		background-size: 750rpx 1170rpx;
		height: 1170rpx;
		align-items: center;
		justify-content: center;
	}
	#canvas{
		width: 750rpx;
		height: 1170rpx;
	}
</style>
